<template>
  <div style="margin-top:30px;">
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="模板id：">
        <el-input v-model="model_id" > </el-input>
      </el-form-item>
      <el-form-item label="模板名：">
        <el-input v-model="model_name" > </el-input>
      </el-form-item>
      <el-form-item label="模板类型：">
        <el-select
          v-model="category"
          @change="chooseCategory"
          placeholder="请选择模板类型"
          style="width:200px;"
          >
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
        <el-button type="primary" @click="toDiyLdy">添加模板</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col  :lg="4" :sm="6" :xs="24"
               v-for="(item, index) in ldyData.items"
               :key="index"
               :index="index"
               :item="item"
               style="padding:0 10px;position: relative;margin-bottom:20px;height:370px"
        >
        <el-card :body-style="{ padding: '0px' }">
          <img :src="item.view_img" class="image">
          <div style="padding: 14px;text-align: center;">
            <span>{{item.model_name}}</span>
          </div>
          <div class="num">
            <el-button size="small" type="primary"  @click="modifyLdy(item.id)">{{item.id}}</el-button>
          </div>
          <div class="btn">
            <el-button size="small" type="primary"><a target="_blank"  :href="'http://p.2217wy.com/pages/view/' + item.id + ''" >预览</a></el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="PageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      style="margin:20px 0;text-align:center;"
      >
    </el-pagination>
  </div>
</template>
<script>

export default {
  data() {
    return {
      model_id:"",
      model_name:"",
      //模板类型列表
      categoryList:[],
      category:"",
      ldyData:{
        "items": [
        {
          "category_name": "角色扮演",
          "id": 153,
          "model_name": "少女战争-2217",
          "bottom_text_bg_color": "#d1d7ef",
          "bottom_text_color": "#000",
          "view_img": "https://files.tonnn.com/202011/1604646212142072.jpg",
          "category": 1004
        },
        {
          "category_name": "角色扮演",
          "id": 152,
          "model_name": "少女战争-2217",
          "bottom_text_bg_color": "#d1d7ef",
          "bottom_text_color": "#000",
          "view_img": "https://files.tonnn.com/202011/1604479451848089.jpg",
          "category": 1004
        },
        {
          "category_name": "角色扮演",
          "id": 151,
          "model_name": "少女战争-2217",
          "bottom_text_bg_color": "#d1d7ef",
          "bottom_text_color": "#000",
          "view_img": "https://files.tonnn.com/202011/1604471576674755.jpg",
          "category": 1004

        },
        {
          "category_name": "西方魔幻",
          "id": 150,
          "model_name": "玄幻IP改编手游 - 2217",
          "bottom_text_bg_color": "#D1D7EF",
          "bottom_text_color": "#000",
          "view_img": "https://files.tonnn.com/202011/1604470646752446.jpg",
          "category": 1002
        }
        ],
        "page": 1,
        "pages": 8,
        "per_page": 20,
        "total": 153,
        "code": 200,
        "message": "success"
      },
      // 默认显示第几页
      currentPage:1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount:0,
      // 个数选择器（可修改）
      pageSizes:[20,40,60,80],
      // 默认每页显示的条数（可修改）
      PageSize:20,

    };
  },

  components: {

  },
  created() {
  },
  mounted() {
   this.getCategoryList();
   this.getData();

  },
  methods: {
    // 获取模板类型
    getCategoryList(){
      return new Promise((resolve, reject) => {
          let queryObj = {
            //token: this.mob_token,
            key: 'game_category',
          };
          this.$api.wyChoices(queryObj).then((res) => {
            if (res.code == "0") {
            this.categoryList=res.data;
            //console.log(this.categoryList);
          }
        });
      });
    },
    //选择模板类型
    chooseCategory() {
      console.log(this.category);
    },
    searchData(){
      this.getData();
    },
    getData() {
      return new Promise((resolve, reject) => {
        let queryObj = {
          //token: this.mob_token,
          page: this.currentPage,
          per_page: this.PageSize,
          id: this.model_id,
          model_name:this.model_name,
          category: this.category,
        };
        this.$api.ldyList(queryObj).then((res) => {
          if (res.code ==200) {
            console.log(res);
            this.ldyData=res;
            // 将数据的长度赋值给totalCount
            this.totalCount=res.total
          }
        });
      });
    },
// 每页显示的条数
    handleSizeChange(val){
      // 改变每页显示的条数
      this.PageSize=val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1;
      this.getData();
    },
// 显示第几页
    handleCurrentChange(val){
        // 改变默认的页数
        this.currentPage=val;
        this.getData();
    },
   //修改落地页模板
    modifyLdy(id){
      const vm = this;
      console.log(id);
      vm.$router.push({name: 'modifyLdy', query: { model_id: id }})

    },
    //添加落地页模板
    toDiyLdy(){
      const vm = this;
      vm.$router.push({name: 'addLdy'})

    },
  },
};
</script>
<style lang='stylus' scoped>
  .image {
    height: 300px;
    margin: 20px auto 0 auto;
    display: block;
  }
  .num{
    position: absolute;
    top: 0;
    left:10px;
  }
  .btn{
    position: absolute;
    top: 0;
    right:10px;
  }
  .btn a,.num a{
    color: #fff;
    text-decoration: none;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
